<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
    <el-breadcrumb-item v-for="item in list">{{ item.meta?.title }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import {reactive, toRefs, watch} from "vue"
import {useRoute} from "vue-router"

export default {
  setup() {
    const route = useRoute()
    const state = reactive({
      list: route.matched,
    })
    watch(route, (to, from) => {
      state.list = to.matched
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>

<style scoped>
.breadcrumb {
  padding: 20px;
}
</style>
